<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>主题色，影响指示箭头。箭头优先使用按钮组末位按钮设置，无则使用该处设置</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色，影响指示箭头。箭头优先使用按钮组末位按钮设置，无则使用该处设置</view>
			</view>
			<view class="tr">
				<view>leftButtons</view>
				<view>Array(Object)</view>
				<view>无</view>
				<view>左侧按钮组，不使用slot时有效。详情见下</view>
			</view>
			<view class="tr">
				<view>rightButtons</view>
				<view>Array(Object)</view>
				<view>无</view>
				<view>右侧按钮组，不使用slot时有效。详情见下</view>
			</view>
			<view class="tr">
				<view>opened</view>
				<view>Boolean,String</view>
				<view>false</view>
				<view>初始打开状态，可选left、right、false(或其他值均视为关闭)</view>
			</view>
			<view class="tr">
				<view>useArr</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用指示箭头</view>
			</view>
			<view class="tr">
				<view>minHeight</view>
				<view>String</view>
				<view>2.5em</view>
				<view>最小高度</view>
			</view>
			<view class="tr">
				<view>trigger</view>
				<view>Number</view>
				<view>20</view>
				<view>滑动触发距离，单位px</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用滑动，同时按钮组禁用。按钮使用slot内容则不受控制</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>允许滑动，同时按钮组禁用。按钮使用slot内容则不受控制</view>
			</view>
			<view class="tr">
				<view>@event</view>
				<view>事件</view>
				<view></view>
				<view>按钮组按钮点击事件，提交按钮对象作为返回结果。按钮组按钮对象应设置event参数标识事件名</view>
			</view>
			
		</view>
		
		<view class="p-sm">
			<vi-collapse title="按钮组对象参数" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>默认值</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>name</view>
						<view>String</view>
						<view>按钮文字</view>
					</view>
					<view class="tr">
						<view>type</view>
						<view>String</view>
						<view>主题色。默认值：default</view>
					</view>
					<view class="tr">
						<view>color</view>
						<view>String</view>
						<view>自定义主题色</view>
					</view>
					<view class="tr">
						<view>textColor</view>
						<view>String</view>
						<view>固定文字色</view>
					</view>
					<view class="tr">
						<view>plain</view>
						<view>Booleam</view>
						<view>镂空。默认值：false</view>
					</view>
					<view class="tr">
						<view>width</view>
						<view>String</view>
						<view>按钮宽。默认值：auto</view>
					</view>
					<view class="tr">
						<view>disabled</view>
						<view>Boolean</view>
						<view>按钮禁用。默认值：false</view>
					</view>
					<view class="tr">
						<view>disabled</view>
						<view>Boolean</view>
						<view>按钮禁用。默认值：false</view>
					</view>
					<view class="tr">
						<view>readOnly</view>
						<view>Boolean</view>
						<view>按钮只读。默认值：false</view>
					</view>
					<view class="tr">
						<view>disabledMsg</view>
						<view>String</view>
						<view>按钮禁用状态点击提示</view>
					</view>
					<view class="tr">
						<view>readOnlyMsg</view>
						<view>String</view>
						<view>按钮只读状态点击提示</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-swipe-cell :leftButtons="左按钮组" :rightButtons="右按钮组">内容&lt;/vi-swipe-cell>`}}
			</view>
			<view class="py-sm">
				<vi-swipe-cell :leftButtons="leftButtons" :rightButtons="rightButtons">
					<view class="full fbox H x-left px-md borderbox">
						这是内容
					</view>
				</vi-swipe-cell>
			</view>
			<view class="py-sm">
				slot按钮内容
			</view>
			<view class="py-sm">
				<vi-swipe-cell :rightButtons="rightButtons">
					<view slot="left" class="fbox">
						<vi-button type="success" radius="" width="5em">按钮1</vi-button>
						<vi-button type="primary" radius="" width="5em">按钮2</vi-button>
					</view>
					<view class="full fbox H x-left px-md borderbox">
						这是内容
					</view>
				</vi-swipe-cell>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftButtons:[
					{name:"添加",event:"add",type:"primary"}
				],
				rightButtons:[
					{name:"删除",event:"delete",type:"error"},
					{name:"查看",event:"view",type:"default"},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.pageContainer{
	
}
</style>
